<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>ces</title>
		<link rel="stylesheet" type="text/css" href="css/wp.css" />
	</head>
	<body>
		<!-- <h1>wp love me!</h1> -->
		<div class="wp">

		</div>
		<div class="wp" id="app">
			<!-- <div v-color="red">12</div> -->
			<text v-love="love">love</text>
	<!-- 		{{wp | msgWp}}
			{{sex | sexFormat}} -->
			<!-- <hr /> -->

			<!-- <input type="range" v-model="fontSize" min="0" max="100" step="5" /> -->
			<!-- <input type="text" v-model="wp" /> -->
			<!-- <div class="flex1">Flex 1</div>
			<div class="flex2">Flex 2</div>
			<div class="flex3">Flex 3</div> -->
		<!-- 	<wp-love></wp-love>
			<wp-me></wp-me>
			<sum></sum>
 -->
			<!-- <div v-love="red">wp</div> -->
		</div>
		<div class="wp-um"></div>

		<!-- <template id="sum">
			<h1>sum</h1>
		</template> -->

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// Vue.directive('color', {
			// 	bind: function(el,v) {
			// 		console.log(el,v);
			// 		el.style.color = v.value;
			// 	},
			// 	inserted: function(el) {
			// 		el.style.color = 'blue';
			// 	},
			// 	updated: function(el) {
			// 		el.style.color = 'blue';
			// 	}
			// })
			// Vue.component('wp-love', {
			// 	template: '<h1>wp love</h1>',
			// 	data: {}
			// })
			// Vue.filter('sexFormat', function(sex) {
			// 	return sex == 1 ? 'x' : 'y';
			// })
			// Vue.filter('msgWp', function(str) {
			// 	return str.replace('wp', '***');
			// })
			
			export default {
			// let vm = new Vue({
			// 	el: '#app',
				data() {
					return {
						wp: 'me love wp',
						sex: 1,
						red:'red',
						love:'red',
						fontSize: 10,
						showName: 'writeback',
					}
				},
				directives: {
					'love': {
						bind: function(el, val) {
							el.style.color = val.value;
						}
					}
				},
				methods: {},
				components: {
					'wp-me': {
						template: '<h1>me</h1>'
					},
					'sum': {
						template: "#sum"
					}
				},
				watch: {
					fontSize(newval, oldval) {
						console.log(newval, oldval);
					},
					wp(m, n) {
						console.log(m, n);
						if (m == 'love') {
							alert('love');
						}
					}
				}
			}
		</script>


	</body>
</html>
